<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <div class="box">
      <el-tabs
        value="first"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="基本信息"
          name="first"
        >
          <div
            v-if="echo"
            style="height:500px"
          >
            <el-row
              height="500px"
              :gutter="20"
            >
              <el-col :span="8"><div class="grid-content bg-purple"><span>员工编号:</span>{{ driverDetailList.userId }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>司机名称：</span>{{ driverDetailList.name }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>所属机构:</span>{{ agency.name }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>电话:</span>{{ driverDetailList.mobile }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>年龄:</span>{{ driverDetailList.age }}</div></el-col>
            </el-row>
            <el-button
              class="edit"
              type="success"
              @click="edit()"
            >编辑</el-button>

          </div>
          <div
            v-else
            style="height:500px"
          >
            <el-form
              ref="driverDetailLists"
              :model="driverDetailLists"
              height="500px"
              :inline="true"
              label-width="85px"
            >
              <el-row
                :gutter="0"
              >
                <el-col :span="8">
                  <el-form-item label="员工编号">
                    <el-input
                      v-model="driverDetailList.userId"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机名称">
                    <el-input
                      v-model="driverDetailList.name"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属机构">
                    <el-input
                      v-model="driverDetailList.agency.name"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="电话">
                    <el-input
                      v-model="driverDetailList.mobile"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="年龄"
                    prop="age"
                    :rules="[
                      { required: true, message: '年龄不能为空'},
                      { type: 'number', message: '年龄必须为数字值'}
                    ]"
                  >
                    <el-input
                      v-model.number="driverDetailLists.age"
                      placeholder="请输入年龄"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="button">
                <el-button
                  type="success"
                  @click="BasicUpdates()"
                >保存</el-button>
                <el-button
                  plain
                  @click="echo=true"
                >取消</el-button>
              </div>
            </el-form>

          </div>

        </el-tab-pane>
        <el-tab-pane
          label="驾驶证信息"
          name="second"
        >
          <div
            v-if="echo"
            style="height:500px"
          >
            <el-row
              :gutter="0"
            >

              <el-col :span="8"><div class="grid-content bg-purple"><span>驾驶证号：</span>{{ driverLicenseDetailList.licenseNumber }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>准驾车型：</span>{{ driverLicenseDetailList.allowableType }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>初次领证日期：</span>{{ driverLicenseDetailList.initialCertificateDate }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>驾驶证有效期限：</span>{{ driverLicenseDetailList.validPeriod }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>驾龄：</span>{{ driverLicenseDetailList.driverAge }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>驾驶证类型：</span>{{ driverLicenseDetailList.licenseType }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>从业资格证:</span>{{ driverLicenseDetailList.qualificationCertificate }}</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"><span>入场证信息：</span>{{ driverLicenseDetailList.passCertificate }}</div></el-col><br>
              <el-col :span="20"><div class="grid-content bg-purple"><span>图片信息:</span>
                <div><img
                  v-for="(item,index) in pictureArr"
                  :key="index"
                  style="width:230px;height:130px;"
                  :src="item"
                  alt=""
                ></div>
              </div>
              </el-col>
            </el-row>
            <el-button
              class="edit1"
              type="success"
              @click="ech()"
            >编辑</el-button>

          </div>
          <div
            v-else
            style="height:500px"
          >
            <el-form
              height="500px"
              :inline="true"
              label-width="115px"
            >
              <el-row
                :gutter="5"
              >
                <el-col :span="8">
                  <el-form-item
                    label="驾驶证号"
                  >
                    <el-input
                      v-model="driverLicenseDetailLists.licenseNumber"
                      placeholder="请输入驾驶证号"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="准驾车型">
                    <el-input
                      v-model="driverLicenseDetailLists.allowableType"
                      placeholder="请输入准驾车型"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    class="my-item"
                    label="初次领证日期"
                  >
                    <el-input
                      v-model="driverLicenseDetailLists.initialCertificateDate"
                      placeholder="请输入初次领证日期"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    class="my-item"
                    label="驾驶证有效期限"
                  >
                    <el-input
                      v-model="driverLicenseDetailLists.validPeriod"
                      placeholder="请输入驾驶证有效期限"
                    ><i
                      slot="suffix"
                      style="font-style:normal;margin-right:10px;color:black"
                    >年</i></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾龄">
                    <el-input
                      v-model="driverLicenseDetailLists.driverAge"
                      placeholder="请输入驾龄"
                    ><i
                      slot="suffix"
                      style="font-style:normal;margin-right:10px;color:black"
                    >年</i></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾驶证类型">
                    <el-input
                      v-model="driverLicenseDetailLists.licenseType"
                      placeholder="请输入驾驶证类型"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="从业资格证">
                    <el-input
                      v-model="driverLicenseDetailLists.qualificationCertificate"
                      placeholder="请输入从业资格证"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入场证信息">
                    <el-input
                      v-model="driverLicenseDetailLists.passCertificate"
                      placeholder="请输入入场证信息"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="图片信息">
                    <div>
                      <img
                        v-for="(item,index) in pictureArr"
                        :key="index"
                        style="width:230px;height:130px;"
                        :src="item"
                        alt=""
                      >
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="button1">
              <el-button
                type="success"
                @click="UpdateBook()"
              >保存</el-button>
              <el-button
                plain
                @click="echo=true"
              >取消</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { driverDetail, driverLicenseDetail, driverDetailUpdate, driverLicenseDetailUpdate } from '@/api/transit'
export default {
  data() {
    return {
      agency: {}, // 齐哥的代码所属机构
      driverDetailList: {}, // 数据
      echo: true, // 回显和编辑
      driverLicenseDetailList: {}, // 驾驶数据
      // 更新基本
      driverDetailLists: {
        age: 0, // 年龄
        avatar: '', // 头像
        mobile: '', // 手机号
        name: '', // 司机姓名
        userId: 0, // 司机id
        workNumber: '', // 工号
        workStatus: 0 // 工作状态
      },
      // 更新 驾驶数据
      driverLicenseDetailLists: {
        allowableType: '', // 准驾车型
        driverAge: 0, // 驾龄
        // id: 0, // id
        initialCertificateDate: '', // 初次领证日期
        licenseNumber: '', // 驾驶证号
        licenseType: '', // 驾驶证类型
        passCertificate: '', // 入场证信息
        picture: '', // 图片
        qualificationCertificate: '', // 从业资格证信息
        userId: 0, // 司机id
        validPeriod: ''// 有效期限
      },
      pictureArr: []
    }
  },
  created() {
    // const id = this.$route.query.id

    this.driverDetails()
    this.getdriverLicenseDetail()
  },
  methods: {
    // 获取基本
    async driverDetails() {
      // const id = this.$route.query.id
      const res = await driverDetail(this.$route.params.id)
      console.log('111', res.data)
      this.driverDetailList = res.data
      this.agency = res.data.agency
    },
    // 获取驾驶
    async getdriverLicenseDetail() {
      const res = await driverLicenseDetail(this.$route.params.id)
      console.log('222', res.data)
      this.driverLicenseDetailList = res.data
      this.pictureArr = this.driverLicenseDetailList.picture.split(',')
    },
    handleClick() {
      // 切换tabs栏执行
      this.echo = true
    },
    edit() {
      this.echo = false
      this.driverDetailLists.age = this.driverDetailList.age
      this.driverDetailLists.mobile = this.driverDetailList.mobile // 手机号
      this.driverDetailLists.name = this.driverDetailList.name // 司机姓名
      this.driverDetailLists.userId = this.driverDetailList.userId // 司机id
      this.driverDetailLists.workNumber = this.driverDetailList.account // 工号
      this.driverDetailLists.workStatus = this.driverDetailList.workStatus // 工作状态
    },
    // 更新基本信息
    BasicUpdates() {
      this.$refs.driverDetailLists.validate(async(valid) => {
        if (valid) {
          const res = await driverDetailUpdate(this.$route.params.id, this.driverDetailLists)
          console.log('333', res)
          this.echo = true
        }
      })
    },
    // 编辑驾驶本
    ech() {
      this.echo = false
      this.driverLicenseDetailLists.allowableType = this.driverLicenseDetailList.allowableType
      this.driverLicenseDetailLists.driverAge = this.driverLicenseDetailList.driverAge
      this.driverLicenseDetailLists.initialCertificateDate = this.driverLicenseDetailList.initialCertificateDate
      this.driverLicenseDetailLists.licenseNumber = this.driverLicenseDetailList.licenseNumber
      this.driverLicenseDetailLists.licenseType = this.driverLicenseDetailList.licenseType
      this.driverLicenseDetailLists.passCertificate = this.driverLicenseDetailList.passCertificate
      this.driverLicenseDetailLists.picture = this.driverLicenseDetailList.picture
      this.driverLicenseDetailLists.qualificationCertificate = this.driverLicenseDetailList.qualificationCertificate
      this.driverLicenseDetailLists.userId = this.driverLicenseDetailList.userId
      this.driverLicenseDetailLists.validPeriod = this.driverLicenseDetailList.validPeriod

      console.log('4444', this.pictureArr)
    },
    async UpdateBook() {
      const res = await driverLicenseDetailUpdate(this.$route.params.id, { ...this.driverLicenseDetailLists, id: this.$route.params.id })
      console.log('77777', res)
      this.echo = true
    }

  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>
<style lang="scss" scoped>
.driver-detail {
    /deep/ .el-container{
    flex-direction: column;
    margin-left: 0px;
  }
  .in{
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    /deep/ .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
.box{

  margin: 10px 20px;
   background-color: #fff;
   padding-left: 70px;
   padding-right: 50px;
   height: 570px;
}
.grid-content{
    margin: 10px;
    font-size: 14px;
   }
   span {
     display: inline-block;
     width: 115px;
     margin-right: 25px;
   }
   .my-item .el-form-item__label {
    line-height: 20px;
    color: red;
   }
    .button {
      position: relative;
      left: 365px;
      top:280px;
    }
    .button1 {
      position: relative;
      left: 365px;
      top:51px;
    }
    .edit{
      position: relative;
      left: 400px;
      top:332px;
    }
    .edit1{
      position: relative;
      left: 400px;
      top:127px;
    }
</style>
